<template>
    <span
        :style="{ color: statusColor[DeviceStatus] }"
        v-if="!round && uuid">
        {{translateStatus[DeviceStatus]}}
    </span>
    <span
        v-if="!round && !uuid"
        :style="{ color: '#7948EA' }">
        {{$t('wp_Unknown')}}
    </span>
    <div
        v-if="round && uuid"
        :style="{ color: statusColor[DeviceStatus], border:'1px solid', borderColor: statusColor[DeviceStatus]}"
        class="status">{{translateStatus[DeviceStatus]}}</div>
    <div
        v-if="round && !uuid"
        :style="{ color: '#7948EA', border: '1px solid #7948EA' }"
        class="status">{{$t('wp_Unknown')}}</div>
</template>

<script>
import { MqttThemes } from '@/mqtt.config';
export default {
    props: {
        deviceStatus: {
            type: String,
            default: 'Offline'
        },
        uuid: {
            type: String,
            default: ''
        },
        round: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        deviceStatus: {
            immediate: true,
            handler () {
                this.DeviceStatus = this.deviceStatus;
            }
        },
        DeviceStatus (value) {
            this.$emit('update:deviceStatus', value);
        },
        uuid () {
            this.DeviceStatus = 'Offline';
            this._refreshMqttSub();
        }
    },
    dynamicMqtt () {
        return {
            [MqttThemes.device_status({ Uuid: this.uuid })] (message) {
                // console.log(message);
                if (message) {
                    this.DeviceStatus = message.value;
                }
            }
        };
    },
    data () {
        return {
            DeviceStatus: 'Offline',
            Uuid: '',
            translateStatus: {
                Idle: this.$t('idle'),
                Running: this.$t('running'),
                Estop: this.$t('estop'),
                Offline: this.$t('offline')
            },
            statusColor: {
                Running: '#4dca72',
                Idle: '#CFA911',
                Estop: '#f2637b',
                Offline: '#cccccc'
            },
            i: 0,
            test: ['Running', 'Idle', 'Estop', 'Offline']
        };
    }

};
</script>

<style lang="scss" scoped>
.status {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
}
</style>
